﻿@model smp.ButterflyCakes.Models.FormModels.Order.ComponentHeightModel
<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    <form class="form-horizontal" id="editform" url="/order/savecakeheight">
    @Html.HiddenFor(x => x.OrderId)
    @Html.HiddenFor(x => x.ComponentId)
    <div class="control-group">
        <label class="control-label" for="Height">
            Height (inches)</label>
        <div class="controls">
            <input class="intspinner" type="text" id="Height" name="Height" placeholder="Enter height" value="@Model.Height"/>
        </div>
    </div>
        <div id="HeightTypesGroup" class="control-group">
            <label class="control-label" for="HeightTypes">
                Height Type</label>
            <div id="HeightTypeContainer" class="controls">
                @MvcHtmlString.Create(Model.SelecHeightType.SetElementId("HeightType").Html)
            </div>
        </div>
    <div id="numberOfCakesContainer" class="control-group hide">
        <label class="control-label" for="NumberOfCakes">
            Number of cakes for striping</label>
        <div class="controls">
            <input class="intspinner" type="text" id="NumberOfCakes" name="NumberOfCakes" placeholder="Enter height" value="@Model.NumberOfCakes"/>
        </div>
    </div>
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('#Height').change(function () {
            setTimeout(function () {
                var height = parseInt($('#Height').val(), 10);
                $('#HeightType').find('option').each(function () {
                    if (height < 3 && $(this).val() > 1) {
                        $(this).attr('disabled', 'disabled');
                        $(this).attr('data-toggle', 'tooltip');
                        $(this).attr('title', 'Not suitable for cake height');
                        $(this).css('color', '#D60202');
                    } else {
                        $(this).removeAttr('disabled');
                        $(this).removeAttr('data-toggle');
                        $(this).removeAttr('title');
                        $(this).css('color', '#000000');
                    }
                });
            }, 500);
        });

        $('#HeightType').change(function () {
            if ($('#HeightType').val() == 1) {
                $('#numberOfCakesContainer').slideDown(500);
            } else {
                $('#numberOfCakesContainer').slideUp(500);
            }
        });
    });
</script>
